<template>
  <view class="wrap">
    <view class="search">
      <text class="iconfont icon-sousuo"></text>
      <input placeholder="搜索服务/商品名称" type="text" confirm-type="search" @confirm="onSearch" v-model.trim="searchText" />
      <text class="iconfont icon-biaoqianhuashucha1" @click="clearText"></text>
    </view>
    <view class="reduce">
      <view v-for="(item,index) in tab" class="name" :class="item.choose?'bottom-line':''" @click="changeTag(index)">{{item.name}}</view>
    </view>

    <view class="list">
      <view class="item" v-for="(item, index) in list" :v-key="item.id">
        <view class="title">商品ID: {{item.goodsId ? item.goodsId : '--'}}</view>
        <view class="content">
          <image src="" mode="aspectFill"></image>
          <view class="info">
            <view class="name ellipsis-2">{{item.name}}</view>
            <view class="price" v-if="shopServiceType === 1">¥{{item.price}}/天 押金：¥{{item.deposit}}</view>
            <view class="price" v-else>¥{{item.price}}/次</view>
          </view>
        </view>
        <view class="bottom-bar">
          <button type="default" size="mini">分享</button>
          <button type="default" size="mini" @click="updateStatus" :data-id="item.id" :data-status="item.status"
            :data-index="index">{{item.status == '1' ? '下架' : '上架'}}</button>
          <button type="default" size="mini" @click="updateGoodsDetail" :data-id="item.id">修改</button>
          <button type="default" size="mini" @click="copyGoods(item)">复制</button>
        </view>
      </view>
      <view class="no-data">{{payload.hasmore ? '数据加载中...' : '暂无更多数据'}}</view>
    </view>
    <view class="add iconfont icon-jia" @click="createGoods"></view>
    <view class="modal" v-show="showCopyGoods">
      <view class="content">
        <view class="title">提示</view>
        <view class="body">
          <label for="copynum">备份数量:</label>
          <input type="number" name="copynum" min="1" max="10" placeholder="请输入要备份商品的数量" v-model="copyNum">
        </view>
        <view class="button-bar">
          <button type="default" @click="closeCopyGoods">取消</button>
          <button type="primary" @click="submitCopy()">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    Goods
  } from '../../apis/index.js'
  import {
    utils
  } from '../../utils/index.js'
  import UniDrawer from '@/components/uni-drawer/uni-drawer.vue'
  
  export default {
    comments: {
      'uni-drawer': UniDrawer
    },
    data() {
      return {
        isLoading: false,
        showCopyGoods: false,
        copyItem: null,
        copyNum: 1,
        msg: '',
        searchText: '',
        showRigth: false,
        tab: [{
            name: '全部',
            choose: true
          },
          {
            name: '在售',
            choose: false
          },
          {
            name: '待上架',
            choose: false
          },
          {
            name: '草稿',
            choose: false
          },
        ],
        list: [],
        status: '',
        payload: {
          hasmore: true,
          pageSize: 6,
          current: 1
        },
        shopServiceType: 1,
      };
    },
    methods: {
      changeTag(index) {
        console.log('选择商品筛选', index)
        for (var i in this.tab) {
          this.tab[i].choose = false
        }
        this.tab[index].choose = true
        if (index == '0') {
          this.status = ''
        } else {
          this.status = index
        }
        this.payload.current = 1
        this.payload.hasmore = true
        getList.call(this)
      },
      updateStatus(e) {
        let id = e.currentTarget.dataset.id
        let currentSatus = e.currentTarget.dataset.status
        let currentIndex = e.currentTarget.dataset.index
        let updateStatus = "1"
        if (currentSatus == "1") {
          updateStatus = "2"
        }
        console.log('修改商品状态')
        if (this.isLoading) return
        this.isLoading = true
        utils.wxLoading()
        Goods.updateStatus({
          data: {
            query: {
              id: id,
              status: updateStatus,
            },
          }
        }).then(res => {
          this.isLoading = false
          uni.hideLoading()
          if (res.data.code === 200) {
            utils.wxToastSuccess('操作成功')
            this.list[currentIndex].status = updateStatus
          } else {
            utils.wxToastFail()
          }
        }, err => {
          this.isLoading = false
          uni.hideLoading()
          console.error('操作失败', err)
        })
      },
      updateGoodsDetail(e) {
        let id = e.currentTarget.dataset.id
        utils.routerTo('/pages/createGoods/createGoods?id=' + id)
      },
      createGoods() {
        var shopInfo = uni.getStorageSync('shopInfo')
        utils.routerTo(shopInfo.serviceType === 1 ? '/pages/createGoods/createGoods' :
          '/pages/createService/createService')
      },
      onSearch() {
        this.payload.hasmore = true
        this.payload.current = 1
        getList.call(this)
      },
      clearText() {
        this.searchText = ''
        this.onSearch()
      },
      copyGoods (item) {
        this.showCopyGoods = true
        this.copyItem = item
      },
      /**
       * 提交复制商品
       * @param {*} item 
       */
      submitCopy (item) {
        console.log('确认复制', item);
        utils.wxLoading();
        Goods.copyGoods({
          data: {
            goodsId: this.copyItem.goodsId,
            num: this.copyNum
          }
        }).then(res => {
          utils.wxAlert('复制成功');
          this.showCopyGoods = false
          this.copyNum = 1
          this.onSearch()
        }).finally(() => {
          uni.hideLoading();
        });
      },
      closeCopyGoods () {
        this.showCopyGoods = false
      }
    },
    onLoad(options) {
      this.shopServiceType = uni.getStorageSync('shopInfo').serviceType
      getList.call(this)
    },
    onPullDownRefresh() {
      this.payload.hasmore = true
      this.payload.current = 1
      getList.call(this)
    },
    onReachBottom() {
      if (this.payload.hasmore) {
        this.payload.current += 1
        getList.call(this)
      }
    },
  }

  function getList() {
    let shopInfo = uni.getStorageSync('shopInfo')
    if (this.isLoading) return
    this.isLoading = true
    utils.wxLoading()
    Goods.getGoodsList({
      data: {
        query: {
          id: shopInfo.id, //shopId--需改成变量
          status: this.status,
          title: this.searchText.trim()
        },
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        },
      }
    }).then(res => {
      console.log('获取商品列表成功')
      console.log(res.data)
      this.isLoading = false
      uni.stopPullDownRefresh()
      uni.hideLoading()
      if (res.data.code === 200) {
        // utils.wxToastSuccess()
        this.list = this.payload.current === 1 ? res.data.list : this.list.concat(res.data.list)
        this.payload.hasmore = res.data.list.length === this.payload.pageSize
      } else {
        utils.wxToastFail()
      }
    }, err => {
      uni.stopPullDownRefresh()
      console.error('获取商品列表失败')
      console.error(err)
      this.isLoading = false
      uni.hideLoading()
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #EFEFEF;
  }

  .wrap {
    padding-top: 20rpx;
  }

  .reduce {
    display: flex;
    box-sizing: border-box;
    padding: 5rpx 30rpx 15rpx 30rpx;
    justify-content: space-between;
    background-color: #FFF;
    margin-top: 20rpx;

    .name {
      font-size: 28rpx;
      line-height: 1.5;
      height: 50rpx;
      color: #999999;
      margin-top: 20rpx;
    }

    .bottom-line {
      color: #444C7C;
      border-bottom: 4rpx solid #444C7C;
    }

    padding: 0 20rpx;
    justify-content: space-between;
    background-color: #FFF;
    margin-top: 20rpx;
  }

  .item {
    margin-top: 20rpx;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 0 20rpx;

    .title {
      height: 70rpx;
      line-height: 70rpx;
      color: #999999;
      font-size: 24rpx;
      border-bottom: #EFEFEF 1rpx solid;
    }

    .content {
      display: flex;
      box-sizing: border-box;
      border-bottom: #EFEFEF 1rpx solid;
      padding-top: 10rpx;
      padding-bottom: 20rpx;
      border-bottom: #EFEFEF 1rpx solid;

      image {
        width: 168rpx;
        height: 168rpx;
        background-color: #EFEFEF;
      }

      .info {
        flex: 1;
        box-sizing: border-box;
        padding-left: 20rpx;

        .name {
          font-size: 28rpx;
          line-height: 1.5;
          height: 84rpx;
          ;
        }

        .price {
          color: #ED1709;
          font-size: 24rpx;
        }
      }
    }

    .bottom-bar {
      box-sizing: border-box;
      padding: 15rpx 0;
      display: flex;
      flex-direction: row-reverse;

      button {
        background-color: #FFF;
        color: #333333;
        margin-left: 20rpx;
        margin-right: 0;
        width: 130rpx;
      }
    }
  }

  .no-data {
    color: #999999;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .add {
    width: 80rpx;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: #EFEFEF 1rpx solid;
    position: fixed;
    right: 26rpx;
    bottom: 300rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50rpx;
    color: blue;
  }

  .search {
    height: 88rpx;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    background-color: #FFFFFF;
    box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
    padding: 0 15rpx;

    input {
      font-size: 28rpx;
      flex: 1;
      padding-left: 10rpx;
    }
  }
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.6);
    .content {
      height: 400rpx;
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: #FFF;
      .title {
        box-sizing: border-box;
        padding: 20rpx;
        font-size: 32rpx;
        border-bottom: #EFEFEF 1rpx solid;
      }
      .body {
        flex: 1;
        display: flex;
        box-sizing: border-box;
        border-top: 20rpx;
        padding: 20rpx 20rpx;
        align-items: center;
        label {
          font-size: 28rpx;
          padding-right: 20rpx;
        }
        input {
          flex: 1;
          box-sizing: border-box;
          height: 88rpx;
          padding: 10rpx 20rpx;
          font-size: 28rpx;
          color: #333;
          border: #F7F7F7 1rpx solid;
        }
      }
      .button-bar {
        height: 90rpx;
        display: flex;
        button {
          flex: 1;
          border: unset;
          border-radius: unset;
        }
      }
    }
  }
</style>
